<template>
  <div class="container" @mousemove="updatePosition">
    <img
      :src="imageSource"
      class="floating-image"
      :style="{ top: `${position.y}px`, left: `${position.x}px` }"
    />
    <div class="other-content" @click="toPage">
      <!-- 这里放置其他内容，这些内容不会被图片遮挡 -->
      <p>
        䏌䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替䏌䏌䏌䏌顶替顶替顶替
      </p>
    </div>
  </div>
</template>

<script>
import handImg from "@/assets/scratch/hand.png";
export default {
  data() {
    return {
      imageSource: handImg,
      position: { x: 0, y: 0 },
    };
  },
  methods: {
    toPage() {
      console.log("点击我了");
    },
    updatePosition(event) {
      this.position = {
        x: event.clientX - 150,
        y: event.clientY - 160,
      };
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh; /* 设置容器高度，也可以是其他值 */
}

.floating-image {
  position: absolute;
  pointer-events: none; /* 这使得图片不会干扰鼠标事件传递到下层元素 */
}

.other-content {
  /* 样式可以根据需要自行设置 */
}
</style>
